<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <!-- Use Chrome Frame in IE -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <meta name="description" content="Interactive 3D Tiles styling." />
    <meta name="cesium-sandcastle-labels" content="Showcases, 3D Tiles" />
    <title>Cesium Demo</title>
    <script type="text/javascript" src="../Sandcastle-header.js"></script>
    <script
      type="text/javascript"
      src="../../../Build/CesiumUnminified/Cesium.js"
      nomodule
    ></script>
    <script type="module" src="../load-cesium-es6.js"></script>
  </head>
  <body
    class="sandcastle-loading"
    data-sandcastle-bucket="bucket-requirejs.html"
  >
    <style>
      @import url(../templates/bucket.css);
    </style>
    <div id="cesiumContainer" class="fullSize"></div>
    <div id="loadingOverlay"><h1>Loading...</h1></div>
    <div id="toolbar"></div>
    <script id="cesium_sandcastle_script">
      function startup(Cesium) {
        "use strict";
        //Sandcastle_Begin
        // A demo of interactive 3D Tiles styling
        // Styling language Documentation: https://github.com/CesiumGS/3d-tiles/tree/master/specification/Styling
        // Building data courtesy of NYC OpenData portal: http://www1.nyc.gov/site/doitt/initiatives/3d-building.page
        var viewer = new Cesium.Viewer("cesiumContainer", {
          terrainProvider: Cesium.createWorldTerrain(),
        });

        viewer.scene.globe.depthTestAgainstTerrain = true;

        // Set the initial camera view to look at Manhattan
        var initialPosition = Cesium.Cartesian3.fromDegrees(
          -74.01881302800248,
          40.69114333714821,
          753
        );
        var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(
          21.27879878293835,
          -21.34390550872461,
          0.0716951918898415
        );
        viewer.scene.camera.setView({
          destination: initialPosition,
          orientation: initialOrientation,
          endTransform: Cesium.Matrix4.IDENTITY,
        });

        // Load the NYC buildings tileset.
        var tileset = new Cesium.Cesium3DTileset({
          url: Cesium.IonResource.fromAssetId(75343),
        });
        viewer.scene.primitives.add(tileset);

        // Color buildings based on their height.
        function colorByHeight() {
          tileset.style = new Cesium.Cesium3DTileStyle({
            color: {
              conditions: [
                ["${Height} >= 300", "rgba(45, 0, 75, 0.5)"],
                ["${Height} >= 200", "rgb(102, 71, 151)"],
                ["${Height} >= 100", "rgb(170, 162, 204)"],
                ["${Height} >= 50", "rgb(224, 226, 238)"],
                ["${Height} >= 25", "rgb(252, 230, 200)"],
                ["${Height} >= 10", "rgb(248, 176, 87)"],
                ["${Height} >= 5", "rgb(198, 106, 11)"],
                ["true", "rgb(127, 59, 8)"],
              ],
            },
          });
        }

        // Color buildings by their latitude coordinate.
        function colorByLatitude() {
          tileset.style = new Cesium.Cesium3DTileStyle({
            defines: {
              latitudeRadians: "radians(${Latitude})",
            },
            color: {
              conditions: [
                ["${latitudeRadians} >= 0.7125", "color('purple')"],
                ["${latitudeRadians} >= 0.712", "color('red')"],
                ["${latitudeRadians} >= 0.7115", "color('orange')"],
                ["${latitudeRadians} >= 0.711", "color('yellow')"],
                ["${latitudeRadians} >= 0.7105", "color('lime')"],
                ["${latitudeRadians} >= 0.710", "color('cyan')"],
                ["true", "color('blue')"],
              ],
            },
          });
        }

        // Color buildings by distance from a landmark.
        function colorByDistance() {
          tileset.style = new Cesium.Cesium3DTileStyle({
            defines: {
              distance:
                "distance(vec2(radians(${Longitude}), radians(${Latitude})), vec2(-1.291777521, 0.7105706624))",
            },
            color: {
              conditions: [
                ["${distance} > 0.0012", "color('gray')"],
                [
                  "${distance} > 0.0008",
                  "mix(color('yellow'), color('red'), (${distance} - 0.008) / 0.0004)",
                ],
                [
                  "${distance} > 0.0004",
                  "mix(color('green'), color('yellow'), (${distance} - 0.0004) / 0.0004)",
                ],
                ["${distance} < 0.00001", "color('white')"],
                [
                  "true",
                  "mix(color('blue'), color('green'), ${distance} / 0.0004)",
                ],
              ],
            },
          });
        }

        // Color buildings with a '3' in their BIN property.
        function colorByStringRegex() {
          tileset.style = new Cesium.Cesium3DTileStyle({
            color:
              "(regExp('3').test(String(${BIN}))) ? color('cyan', 0.9) : color('purple', 0.1)",
          });
        }

        // Show only buildings greater than 200 meters in height.
        function hideByHeight() {
          tileset.style = new Cesium.Cesium3DTileStyle({
            show: "${Height} > 200",
          });
        }

        Sandcastle.addToolbarMenu([
          {
            text: "Color By Height",
            onselect: function () {
              colorByHeight();
            },
          },
          {
            text: "Color By Latitude",
            onselect: function () {
              colorByLatitude();
            },
          },
          {
            text: "Color By Distance",
            onselect: function () {
              colorByDistance();
            },
          },
          {
            text: "Color By Name Regex",
            onselect: function () {
              colorByStringRegex();
            },
          },
          {
            text: "Hide By Height",
            onselect: function () {
              hideByHeight();
            },
          },
        ]);

        colorByHeight();

        //Sandcastle_End
        Sandcastle.finishedLoading();
      }
      if (typeof Cesium !== "undefined") {
        window.startupCalled = true;
        startup(Cesium);
      }
    </script>
  </body>
</html>
